<script lang="ts" setup>
import dayjs from 'dayjs';
import type { SelectProps } from 'ant-design-vue';
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
import { Button, Card, message, Step, Steps, Tabs, TabPane, Select } from 'ant-design-vue';
import { h, ref, watch, computed } from 'vue';
import { MdiDelete } from '@vben/icons';
import { Page, useVbenModal } from '@vben/common-ui';
import { useVbenForm, z } from '#/adapter/form';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getChemicalInfoApi, handleMSDSdataApi } from '#/api';

import {
  FirstFormSchemas,
  ThirdFormSchemas,
  commonFormConfig,
  SecondFormSchemas1,
  SecondFormSchemas2,
  SecondFormSchemas3,
  SecondFormSchemas4,
  SecondFormSchemas5,
  SecondFormSchemas6,
  SecondFormSchemas7,
  SecondFormSchemas8,
  SecondFormSchemas9,
  SecondFormSchemas10,
  SecondFormSchemas11,
  SecondFormSchemas12,
  SecondFormSchemas13,
  SecondFormSchemas14,
  SecondFormSchemas15,
  SecondFormSchemas16,
  compInfoTableSchemas,
  chemPropsTableSchemas,
} from './schemas';

// MSDS的十六部分
const MSDSpanes = ref<{ title: string; content: string; key: string }[]>([
  { title: '化学品及企业标识', key: '0' },
  { title: '危险性概述', key: '1' },
  { title: '成分/组成信息', key: '2' },
  { title: '急救措施', key: '3' },
  { title: '消防措施', key: '4' },
  { title: '泄漏应急处理', key: '5' },
  { title: '操作处置与储存', key: '6' },
  { title: '接触控制/个体防护', key: '7' },
  { title: '理化特性', key: '8' },
  { title: '稳定性和反应性', key: '9' },
  { title: '毒理学资料', key: '10' },
  { title: '生态学资料', key: '11' },
  { title: '废弃处置', key: '12' },
  { title: '运输信息', key: '13' },
  { title: '法规信息', key: '14' },
  { title: '其它信息', key: '15' },
]);

// 定义一个接口 compInfoTabRowType，用于描述表格行数据的结构（组分、浓度、CAS号、类别）
interface compInfoTabRowType {
  compName: string;
  compConc: number;
  casNo: string;
  hazCat: string;
}
interface chemPropsTabRowType {
  chemName: string;   // 化学物质名称
  appearance: string; // 外观与性状  
  phValue: string;    // pH值  
  meltPoint: string;  // 熔点(℃)  
  boilPoint: string;  // 沸点(℃)  
  relDensity: string; // 相对密度(水=1)  
  vaporDens: string;  // 相对蒸气密度(空气=1)  
  vaporPress: string; // 饱和蒸气压(kPa)  
  critPress: string;  // 临界压力(MPa)  
  octanolCoef: string; // 辛醇/水分配系数  
  flashPoint: string; // 闪点(℃)  
  igniteTemp: string; // 自燃温度(℃)  
  explLower: string;  // 爆炸下限[%(V/V)]  
  explUpper: string;  // 爆炸上限[%(V/V)]  
  decompTemp: string; // 分解温度(℃)  
  viscosity: string;  // 黏度（mPa.s）  
  combustHeat: string; // 燃烧热(kJ/mol)  
  critTemp: string;   // 临界温度(℃)  
  solubility: string; // 溶解性
}
const componentOptions = ref<SelectProps['options']>([]);
// 定义一个RowType类型空数组，用于存放组分数据
const compInfoGrid_data: compInfoTabRowType[] = [];
const chemPropsGrid_data: chemPropsTabRowType[] = [];

const currentCard = ref(0); // 记录当前是第几步
const activeTab = ref(MSDSpanes.value[0].key); // 记录当前是哪个panes
const currentTab = ref(0); // 记录当前是第二个卡片的第几个表单
const needMerge = ref(true);
const isCollapsed = ref(false); // 记录当前是否折叠
let isGridLoaded = false; // 记录表格是否加载完成
const loadingV = ref(false); // 记录当前是否进入loading状态
const modalTitle = ref('提示'); // 当前弹窗标题
const modalContent = ref(''); // 当前弹窗内容

/* 弹窗 */
const [BaseModal, BaseModalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  fullscreenButton: false,
  overlayBlur: 6,
  closable: false,
  loading: true,
  footerClass: 'hidden',

  onCancel() {
    BaseModalApi.close();
  },
});
/* 第一个Card的表单 */
const [FirstForm, firstFormApi] = useVbenForm({
  ...FirstFormSchemas,
  ...commonFormConfig,
  showCollapseButton: true,
  collapsed: false,
  collapsedRows: 0,
  handleSubmit: onFirstSubmit,
  resetButtonOptions: {
    show: false,
  },
  submitButtonOptions: {
    // 按钮显示文本
    content: '下一步',
  },
});

/* 第二个Card的表单 */
const compInfoOptions: VxeGridProps<compInfoTabRowType> = {
  ...compInfoTableSchemas,
  border: true,
  autoResize: true,
  keepSource: true, // 是否保留源数据，用于重置表格
  maxHeight: 450,
  showOverflow: false, 
};
const compInfogridEvents: VxeGridListeners<compInfoTabRowType> = {
  editClosed: ({ row }) => {
    const sumResult = sumConcentration();
    if (!sumResult) {
      row.compConc = null;
    }
  },
};
const [compInfoGrid, compInfoGridApi] = useVbenVxeGrid({ 
  gridOptions: compInfoOptions,  // 保持属性名为 gridOptions
  gridEvents: compInfogridEvents // 传递事件配置
});
const chemPropsOptions: VxeGridProps<chemPropsTabRowType> = {
  ...chemPropsTableSchemas,
  border: true,
  autoResize: true,
  keepSource: true, // 是否保留源数据，用于重置表格
  maxHeight: 450,
  showOverflow: false, 
};
const chemPropsgridEvents: VxeGridListeners<chemPropsTabRowType> = {};
const [chemPropsGrid, chemPropsGridApi] = useVbenVxeGrid({ 
  gridOptions: chemPropsOptions,  // 保持属性名为 gridOptions
  gridEvents: chemPropsgridEvents // 传递事件配置
});

// SecondForm1到SecondForm16
const [SecondForm1, second1FormApi] = useVbenForm({
  ...SecondFormSchemas1,
  ...commonFormConfig,
  handleReset: onSecondReset,
  handleSubmit: nextBtn,
  resetButtonOptions: {
    content: '上一步',
  },
  wrapperClass: 'grid-cols-2'
});
const [SecondForm2, second2FormApi] = useVbenForm({
  ...SecondFormSchemas2,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
});
const [SecondForm3, second3FormApi] = useVbenForm({
  ...SecondFormSchemas3,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
});
const [SecondForm4, second4FormApi] = useVbenForm({
  ...SecondFormSchemas4,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
});
const [SecondForm5, second5FormApi] = useVbenForm({
  ...SecondFormSchemas5,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
});
const [SecondForm6, second6FormApi] = useVbenForm({
  ...SecondFormSchemas6,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
});
const [SecondForm7, second7FormApi] = useVbenForm({
  ...SecondFormSchemas7,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
});
const [SecondForm8, second8FormApi] = useVbenForm({
  ...SecondFormSchemas8,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
  wrapperClass: 'grid-cols-2'
});
const [SecondForm9, second9FormApi] = useVbenForm({
  ...SecondFormSchemas9,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
});
const [SecondForm10, second10FormApi] = useVbenForm({
  ...SecondFormSchemas10,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
  wrapperClass: 'grid-cols-2'
});
const [SecondForm11, second11FormApi] = useVbenForm({
  ...SecondFormSchemas11,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
   wrapperClass: 'grid-cols-2'
});
const [SecondForm12, second12FormApi] = useVbenForm({
  ...SecondFormSchemas12,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
   wrapperClass: 'grid-cols-2'
});
const [SecondForm13, second13FormApi] = useVbenForm({
  ...SecondFormSchemas13,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
});
const [SecondForm14, second14FormApi] = useVbenForm({
  ...SecondFormSchemas14,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: nextBtn,
   wrapperClass: 'grid-cols-2'
});
const [SecondForm15, second15FormApi] = useVbenForm({
  ...SecondFormSchemas15,
  ...commonFormConfig,
  labelWidth: 200,
  handleReset: preBtn,
  handleSubmit: nextBtn,
  wrapperClass: 'grid-cols-2',
});
const [SecondForm16, second16FormApi] = useVbenForm({
  ...SecondFormSchemas16,
  ...commonFormConfig,
  handleReset: preBtn,
  handleSubmit: onSecondSubmit,
  submitButtonOptions: {
    // 按钮显示文本
    content: '下一步',
  },
   wrapperClass: 'grid-cols-2'
});

const [ThirdForm, thirdFormApi] = useVbenForm({
  ...ThirdFormSchemas,
  ...commonFormConfig,
  handleReset: onThirdReset,
  handleSubmit: handlePrint,
  resetButtonOptions: {
    content: '上一步',
  },
  submitButtonOptions: {
    // 按钮显示文本
    content: '打印',
  },
});
const formApis = [
  second1FormApi,
  second2FormApi,
  second3FormApi,
  second4FormApi,
  second5FormApi,
  second6FormApi,
  second7FormApi,
  second8FormApi,
  second9FormApi,
  second10FormApi,
  second11FormApi,
  second12FormApi,
  second13FormApi,
  second14FormApi,
  second15FormApi,
  second16FormApi,
];

/*==============================函数过程===============================*/
// 根据currentTab.value的值决定GridApi
const currentGridApi = computed(() => {
  return currentTab.value === 2 ? compInfoGridApi : chemPropsGridApi;
});
const currentGridData = computed(() => {
  return currentTab.value === 2 ? compInfoGrid_data : chemPropsGrid_data;
});

const handleAdd = async () => {
  // 待完善
  const GridApi = currentGridApi.value;
  const record = {};
  const { row: newRow } = await GridApi.grid.insertAt(record, -1);
  GridApi.grid.setEditRow(newRow);
};
const handleRemove = async (row: compInfoTabRowType | chemPropsTabRowType) => {
  const GridApi = currentGridApi.value;
  GridApi.grid.remove(row);
};
const handleRemoveSelected = async () => {
  const GridApi = currentGridApi.value;
  const selectedRows = await GridApi.grid.getCheckboxRecords();
  if (selectedRows.length > 0) {
    GridApi.grid.removeCheckboxRow();
    message.success('删除成功');
  } else {
    message.info('请至少选择一行数据');
  }
};
const handleSave = async () => {
  const GridApi = currentGridApi.value;
  // console.log(GridApi.grid.getTableData().fullData);
};
const handleReload = async () => {
  const GridApi = currentGridApi.value;
  const GridData = currentGridData.value;
  GridApi.grid.reloadData(GridData);
};
const revertAllEvent = async () => {
  const GridApi = currentGridApi.value;
  const updateRecords = GridApi.grid.getUpdateRecords();
  if (updateRecords.length > 0) {
    GridApi.grid.revertData();
    message.success('已撤销所有更改');
  } else {
    message.info('数据未改动');
  }
};

async function handlePrint(values: Record<string, any>) {
  // 打印文件
  message.success({
    content: `合并后的数据为: ${JSON.stringify(values)}`,
  });
}
const sumConcentration = async () => {
  const { fullData } = compInfoGridApi.grid.getTableData();
  const sum = fullData.reduce((acc: number, row: compInfoTabRowType) => acc + (Number(row.compConc) || 0), 0);
  // 浓度不能小于0，也不能大于100
  const sumValid = sum > 0 && sum <= 100;
  return sumValid;
};

/*==============================表单事件===============================*/
async function ValidGrid(GridIndex: number) {
  const GridApi = GridIndex === 2 ? compInfoGridApi : chemPropsGridApi;
  // 获取表格行数
  const rowCount = GridApi.grid.getTableData().fullData.length;
  if (rowCount === 0) {
    return false;
  }
  if (GridIndex === 2) {
    const sumResult = await sumConcentration();
    if (!sumResult) {
      return '浓度总和不正确!';
    }
  }
  const errMap = await GridApi.grid.fullValidate(true);   
  // 验证结果：验证通过返回undefined（!errMap=true)，验证不通过返回一个对象(!errMap=false);
  if (!!errMap) {
    return '表格信息不完整！';
  }
  return !errMap;
}

const validateForm = async (formApi, needSubmit: boolean = false) => {
  const result = needSubmit ? await formApi.validateAndSubmitForm() : await formApi.validate();
  // 如果 needSubmit 为 true，result !== undefined表示表单提交成功
  // 如果 needSubmit 为 false，则返回表单验证结果result.valid
  return needSubmit ? result !== undefined : result.valid;
};

// 第二个Card的表单验证函数
async function validateSecondForms(start = 0, end = formApis.length) {
  for (let i = start; i < end; i++) {
    const isValid = [2, 8].includes(i) ? await ValidGrid(i) : await validateForm(formApis[i]);
    if (isValid !== true) {
      currentCard.value = 1;
      activeTab.value = MSDSpanes.value[i].key;
      currentTab.value = i;
      return isValid;
    }
  }
  return true;
}

// 弹窗
type ModalAction = 'open' | 'close' | 'update'; // 弹窗操作类型
function updateBaseModal(action: ModalAction = 'update', title?: string, content?: string, locked: boolean = true){
  switch (action) {
    case 'open':
      modalTitle.value = title;
      modalContent.value = content;
      BaseModalApi.open()
      locked ? BaseModalApi.lock() : BaseModalApi.lock(false);
      break;
    case 'close':
      BaseModalApi.close();
      break;
    case 'update':
      modalTitle.value = title;
      modalContent.value = content;
      locked ? BaseModalApi.lock() : BaseModalApi.unlock();
      break;
  }
}

async function onFirstSubmit(values: Record<string, any>) {
  // 清空componentOptions、compInfoGrid_data、chemPropsGrid_data数组
  componentOptions.value = [];
  compInfoGrid_data.splice(0, compInfoGrid_data.length);
  chemPropsGrid_data.splice(0, chemPropsGrid_data.length);

  // 将values.component中的每个元素添加到componentOptions数组中
  componentOptions.value = values.component.map((item: string) => ({
    label: item,
    value: item,
  }));
  // 使用API接口获取CAS号
  const result = await getChemicalInfoApi(JSON.stringify(componentOptions.value));
  // 初始化表格数据compInfoGrid_data
  result.forEach((item: any) => {
    compInfoGrid_data.push({
      compName: item.name,
      compConc: null,
      casNo: item.casNo,
      hazCat: item.hazCat
    });

    chemPropsGrid_data.push({
      chemName: item.name,
      appearance: item.appearance,
      phValue: item.phValue,
      meltPoint: item.meltPoint,
      boilPoint: item.boilPoint,
      relDensity: item.relDensity,
      vaporDens: item.vaporDens,
      vaporPress: item.vaporPress,
      critPress: item.critPress,
      octanolCoef: item.octanolCoef,
      flashPoint: item.flashPoint,
      igniteTemp: item.igniteTemp,
      explLower: item.explLower,
      explUpper: item.explUpper,
      decompTemp: item.decompTemp,
      viscosity: item.viscosity,
      combustHeat: item.combustHeat,
      critTemp: item.critTemp,
      solubility: item.solubility
    })
  })

  // 推荐在此处完成表格数据初始化
  // 也可放在步骤切换事件内；因直接点击步骤条时表格数据并未加载完成，导致验证表格时误通过的BUG已修复
  if (!isGridLoaded) {
    compInfoGridApi.grid.loadData(compInfoGrid_data);
    chemPropsGridApi.grid.loadData(chemPropsGrid_data);
    isGridLoaded = true;
  }
  currentCard.value = 1;
}

function onSecondReset() {
  currentCard.value = 0;
}
async function onSecondSubmit() {

  loadingV.value = true;
  // loading状态的message提示
  message.loading({
    content: '数据验证处理中，请稍后...',
    duration: 0,
    key: 'beforeSubmit',
  });
  // 延迟1秒，确保全局loading生效，防止用户再次操作
  await new Promise(resolve => setTimeout(resolve, 1000));

  // 验证第二个卡片的所有表单
  const isValid = await validateSecondForms();
  if (isValid !== true) {
    // updateBaseModal('close');
    loadingV.value = false;
    message.error({ content:isValid, key:'beforeSubmit' });
    return;
  }
  message.loading({
    content: '数据验证通过，提交中...',
    duration: 0,
    key: 'beforeSubmit',
  });
  // updateBaseModal('update', '提示', '验证通过，MSDS！', true);
  const values = await firstFormApi
    .merge(second1FormApi)
    .merge(second2FormApi)
    .merge(second3FormApi)
    .merge(second4FormApi)
    .merge(second5FormApi)
    .merge(second6FormApi)
    .merge(second7FormApi)
    .merge(second8FormApi)
    .merge(second9FormApi)
    .merge(second10FormApi)
    .merge(second11FormApi)
    .merge(second12FormApi)
    .merge(second13FormApi)
    .merge(second14FormApi)
    .merge(second15FormApi)
    .merge(second16FormApi)
    .submitAllForm(needMerge.value);
  // 增加表格数据
  const compInfoData = compInfoGridApi.grid.getTableData().fullData;
  const chemPropsData = chemPropsGridApi.grid.getTableData().fullData;
  values.compInfoTable = compInfoData;
  values.chemPropsTable = chemPropsData;
  // 格式化时间，避免时间格式不一致导致的问题
  values.fillDate = dayjs(values.fillDate).format('YYYY-MM-DD HH:mm:ss');
  // 提交到后端
  handleMSDSdataApi(JSON.stringify(values)).then(() => {
    message.success({ content:'提交成功', key:'beforeSubmit' });
  });
  loadingV.value = false;
  // 处理打印预览逻辑
  currentCard.value = 2;
  // updateBaseModal('close');
  message.success({
    content: '数据处理完成，请确认信息无误后提交！',
    key: 'beforeSubmit',
  });
}
function onThirdReset() {
  currentCard.value = 1;
  activeTab.value = MSDSpanes.value[15].key;
}

/*==============================步骤条、卡片、Tab切换过程===============================*/
/* 为保证切换的流畅性，将验证过程放到最后一个表单提交时 */
// 点击步骤条切换事件
async function onChange(current) {
  if (current < currentCard.value) {
    currentCard.value = current;
    return;
  }

  let isValid = true;
  // 第一个卡片切换时必须进行验证并提交，保证选择的组分信息能够传递到第二个卡片
  if (currentCard.value === 0) {
    isValid =  await validateForm(firstFormApi, true);
  }
  if (current == 2) {
    return onSecondSubmit();
  }

  isValid ? (currentCard.value = current) : message.error('请先完成信息填写！');
}
// 展开/折叠切换
async function toggleCollapse() {
  isCollapsed.value = !isCollapsed.value;
  // 如果是第二个卡片，则切换时需要根据currentTab的值进行切换
  if (currentCard.value === 0) {
    firstFormApi.setState({ collapsed: isCollapsed.value });
  } else if (currentCard.value === 1) {
    formApis[currentTab.value].setState({ collapsed: isCollapsed.value });
  } else if (currentCard.value === 2) {
    thirdFormApi.setState({ collapsed: isCollapsed.value });
  }
}

// 第二个Card的Tab标签页切换事件
async function preBtn() {
  const currentIndex = MSDSpanes.value.findIndex((pane) => pane.key === activeTab.value);
  if (currentIndex > 0) {
    activeTab.value = MSDSpanes.value[currentIndex - 1].key;
  } else if (currentIndex === 0) {
    currentCard.value = 0;
  }
}
async function nextBtn() {
  const currentIndex = MSDSpanes.value.findIndex((pane) => pane.key === activeTab.value);

  if( currentIndex < MSDSpanes.value.length - 1) {
    activeTab.value = MSDSpanes.value[currentIndex + 1].key;
  } else if (currentIndex === MSDSpanes.value.length - 1) {
     await onSecondSubmit();
  }
}

/*==============================监听事件===============================*/
// 监听是否发生Card切换，如果发生切换则及时更新isCollapsed的值为当前formApi的collapsed值
watch(currentCard, (newVal) => {
  if (newVal === 0) {
    isCollapsed.value = firstFormApi.getState().collapsed;
  } else if (newVal === 1) {
    isCollapsed.value = formApis[currentTab.value].getState().collapsed;
  } else if (newVal === 2) {
    isCollapsed.value = thirdFormApi.getState().collapsed;
  }
});
// 监听第二个Card的Tab是否发生切换，如果发生切换则及时更新currentTab的值用于决定显示哪个表单
watch(activeTab, async (newVal) => {
  const index = MSDSpanes.value.findIndex((pane) => pane.key === newVal);

  currentTab.value = index;
  isCollapsed.value = formApis[index].getState().collapsed; // 更新isCollapsed的值
});

/*==============================其他事件===============================*/
const maxWidthClass = computed(() => {
  return [2, 8, 14].includes(currentTab.value) ? 'max-w-full' : 'max-w-6/10';
});
</script>

<template>
  <Page
    v-loading="loadingV" 
    content-class="flex flex-col gap-4"
    description="MSDS管理"
    header-class="pb-0"
    title="MSDS管理"
  >
    <BaseModal class="w-[30%] h-auto" :title="modalTitle" >
      <div class="flex-col-center">
        {{ modalContent }}
      </div>
    </BaseModal>
    <template #description>
      <!-- <div class="text-muted-foreground">
        <p>请按步骤进行信息确认及填写。</p>
      </div> -->
      <div class="flex flex-row pt-3 pb-5 gap-8">
        <Steps :current="currentCard" class="steps" @change="onChange">
          <Step title="选择组成成分" />
          <Step title="确认MSDS信息" />
          <!-- 将最终结果以json等形式保存，下次直接调用打印即可 -->
          <Step title="预览及打印" />
        </Steps>
        <Button type="primary" @click="toggleCollapse"> {{ isCollapsed ? '展开' : '收起' }}</Button>
      </div>
    </template>
    <Card v-show="currentCard === 0">
      <div class="mx-auto max-w-2xl p-6">
        <FirstForm />
      </div>
    </Card>
    <Card v-show="currentCard === 1">
      <Tabs v-model:active-key=activeTab :tabBarGutter=0 type="card">
        <TabPane v-for="pane in MSDSpanes" :key="pane.key" :tab="pane.title">{{ pane.content }}</TabPane> />
        <template #leftExtra>
          <Button type="primary" class="mr-5" @click="preBtn">上一项</Button>
        </template>
        <template #rightExtra>
          <Button type="primary" class="ml-5" @click="nextBtn">下一项</Button>
        </template>
      </Tabs>
      <div :class="`mx-auto ${maxWidthClass} p-6`">
        <SecondForm1 v-show="currentTab === 0" />
        <SecondForm2 v-show="currentTab === 1" />
        <SecondForm3 v-show="currentTab === 2">
          <template #compInfoSlot="slotProps">
            <compInfoGrid
              v-bind="slotProps"
              class="w-full"
              table-title="成分信息"
              table-title-help="根据所选组分生成"
            >
              <template #edit_position="{ row }">
                <Select v-model="row.position" :options="componentOptions" style="width: 100%;"></Select>
              </template>
              <template #cellstool="{ row }">
                <Button type="link" @click="handleRemove(row)">
                  <!-- 20像素大小的图标 -->
                  <MdiDelete class="size-5" style="color: red" />
                </Button>
              </template>
              <template #toolbar-tools>
                <Button class="mr-2" type="primary" @click="handleAdd">新增</Button>
                <Button class="mr-2" type="primary" danger @click="handleRemoveSelected">删除</Button>
                <Button class="mr-2" style="background-color: #0bd092" type="primary" danger @click="handleReload">重置</Button>
                <!--Button style="background-color: #0bd092" type="primary" danger @click="ValidGrid(2)">验证</Button !-->
              </template>
            </compInfoGrid>
          </template>
        </SecondForm3>
        <SecondForm4 v-show="currentTab === 3" />
        <SecondForm5 v-show="currentTab === 4" />
        <SecondForm6 v-show="currentTab === 5" />
        <SecondForm7 v-show="currentTab === 6" />
        <SecondForm8 v-show="currentTab === 7" />
        <SecondForm9 v-show="currentTab === 8" >
          <template #chemPropsSlot="slotProps">
            <chemPropsGrid
              v-bind="slotProps"
              class="w-full"
              table-title="信息"
              table-title-help="根据所选组分生成"
            >
              <template #cellstools="{ row }">
                <Button type="link" @click="handleRemove(row)">
                  <!-- 20像素大小的图标 -->
                  <MdiDelete class="size-5" style="color: red" />
                </Button>
              </template>
              <template #toolbar-tools>
                <Button class="mr-2" type="primary" @click="handleAdd">新增</Button>
                <Button class="mr-2" type="primary" danger @click="handleRemoveSelected">删除</Button>
                <Button class="mr-2" style="background-color: #0bd092" type="primary" danger @click="handleReload">重置</Button>
                <!--Button style="background-color: #0bd092" type="primary" danger @click="ValidGrid(8)">验证</Button !-->
              </template>
            </chemPropsGrid>
          </template>
        </SecondForm9>
        <SecondForm10 v-show="currentTab === 9" />
        <SecondForm11 v-show="currentTab === 10" />
        <SecondForm12 v-show="currentTab === 11" />
        <SecondForm13 v-show="currentTab === 12" />
        <SecondForm14 v-show="currentTab === 13" />
        <SecondForm15 v-show="currentTab === 14" />
        <SecondForm16 v-show="currentTab === 15" />
      </div>
    </Card>
    <Card v-show="currentCard === 2">
      <div class="mx-auto max-w-2xl p-10">
        <ThirdForm />
      </div>
    </Card>
  </Page>
</template>
